<template>
	<div>
		<div class="banner" @click="handleBannerclick">
		<img class="banner-img" :src="ImgUrl">
		<div class="banner-info">
			<div class="banner-number"><span class="iconfont">&#xe692;</span>
				<em>{{this.imgs.length}}</em>
			</div>
			<div class="banner-title">{{this.sigName}}</div>
		</div>
	</div>
	<common-gallary :imgs="imgs" v-show="showGallary" @close="handleGallaryClose"></common-gallary>
	</div>
</template>

<script>
	import CommonGallary from 'common/gallary/Gallary'
	export default {
		name: 'DetailBanner',
		props: {
			list: Array,
			sigName: String,
			ImgUrl: String
		},
		data () {
			return {
				showGallary: false,
				imgs: ['http://img1.qunarzz.com/sight/p0/1502/59/5923e32c4be99ffc.water.jpg_r_800x800_7428eb3c.jpg',
				'http://img1.qunarzz.com/sight/p0/1502/1c/1c4b6791f9aa8bd.water.jpg_r_800x800_2c27da4d.jpg']
			}
		},
		methods: {
			handleBannerclick () {
				this.showGallary = true
			},
			handleGallaryClose () {
				this.showGallary = false
			}
		},
		components: {
			CommonGallary
		}
	}
</script>

<style lang="stylus" scoped>
  .banner
    position: relative
    overflow: hidden
    height: 100px
    padding-bottom: 55%
    .banner-img
      width: 100%
    .banner-info
      position: absolute
      left: 0
      right: 0
      bottom: 0
      line-height: 30px
      background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0 .8))
      .banner-number
        color: #fff
        font-size: 16px
        margin-left: 10px
        border-radius: 10px;
        width: 60px
        height: 20px
        text-align: center
        line-height: 20px
        background: rgba(0, 0, 0 .5);
        em
          font-size: 12px
      .banner-title
        height: 20px
        line-height: 20px
        margin: 10px 10px
        color: #fff
        font-size: 16px
        
       
</style>